<script setup lang="ts">
import {RouterView } from 'vue-router'
import { ElContainer, ElMain, ElAside, ElMenu, ElMenuItem, ElIcon, ElHeader } from 'element-plus';
// import * as icons from '@element-plus/icons-vue'

import { useRouter } from 'vue-router';
import {reactive} from 'vue';
import Icon from '../components/Icon.vue'

const router=useRouter();
const menuData:{data:{path:string,title:string,icon:string}[]}=reactive({data:[]})
const power=JSON.parse(sessionStorage.getItem('power') || '');
if(!power){
    router.push('/login');
}
menuData.data=power;




</script>
<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                :router="true" 
                default-active="/home/student" class="el-menu-vertical-demo">
                    <el-menu-item v-for="v in menuData.data" :index="v.path">
                        <Icon :name="v.icon"></Icon>
                        <span>{{v.title}}</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="/home/teacher">
                        <el-icon><Avatar /></el-icon>
                        <span>教师管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/admin">
                        <el-icon><User /></el-icon>
                        <span>管理员管理</span>
                    </el-menu-item> -->
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>
<style lang="less">
.el-container,.el-aside,.el-menu{
    height: 100%;
}
</style>
